<template>

<el-dialog
  title="添加配置"
  :visible.sync="dialogVisible"
   width="50%"
  :before-close="handleClose">

  <!-- ref对象引用 -->
  <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="模块名称" style="margin-top: 20px;" prop="section">
          <el-input v-model="form.section" placeholder="请输入模块名称"></el-input>
      </el-form-item>

      <!-- region字段 等于shanghai，beijing -->
      <el-form-item label="模块类型" label-width="80px" prop="fileType">
          <el-select v-model="form.fileType" placeholder="请选择模块类型">
          <el-option label="图片" value="0"></el-option>
          <el-option label="轮播图" value="1"></el-option>
          </el-select>
      </el-form-item>
      <!-- :action="process.env.BASE_URL + 'fileManager/upLoadFile'" -->

      <div class="line_video_margin">
          <div class="line_video_lable">
               <span>产品图</span>
          </div>
          <el-upload
            class="upload-demo"
            :action="imageHost+'fileManager/upLoadFile'"
            :on-remove="handleRemoveProduct"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccessProduct">

            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </div>

      <div class="line_video_margin">
          <div class="line_video_lable">
               <span>背景图</span>
          </div>
          <el-upload
            class="upload-demo"
            :action="imageHost+'fileManager/upLoadFile'"
            :on-remove="handleRemoveBackground"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccessBackground">

            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </div>

      <el-form-item label="轮播图所属模块" label-width="80px" style="margin-top: 30px;">
           <el-select v-model="form.sectionName" placeholder="请选择轮播图模块">
                <el-option
                  v-for="item in bannerSectionList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
           </el-select>
      </el-form-item>
      <!-- <div>你选择了{{selectedValue}}</div> -->

      <el-form-item label="标题" style="margin-top: 20px;" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="标题英文" prop="titleEn">
          <el-input v-model="form.titleEn" placeholder="请输入标题英文"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="描述英文" prop="descriptionEn">
          <el-input v-model="form.descriptionEn" placeholder="请输入描述英文" type="textarea"></el-input>
      </el-form-item>

  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>

</el-dialog>

</template>

<script>
   import { addSection,getBannerIdList } from '@/api/system/about_us_section'

   import { imageHost } from '@/api/ImageHost'
   export default{
      data(){
        return{
            imageHost:'',
            bannerSectionList:[],
             // 绑定到v-model的数据，存储当前选中的值
            // selectedValue: '',
            dialogVisible:false,
            form: {
                // 模块类型：字符串存储
                // 类型：图片，或者轮播图
                fileType: '',
                bgUrl:'',
                productUrl:'',
                title:'',
                titleEn:'',
                description:'',
                descriptionEn:'',
                sectionName:'',
                bannerIds:''
            },
            fileList:[],
            rules:{
                  fileType: [{ required: true, message: '请选择模块类型', trigger: 'change' }],
                  title: [{ required: true, message: '请输入标题', trigger: 'blur'}],
                  titleEn: [{ required: true, message: '请输入标题英文', trigger: 'blur'}],
                  description: [{ required: true, message: '请输入描述', trigger: 'blur'}],
                  descriptionEn: [{ required: true, message: '请输入描述英文', trigger: 'blur'}]
            }

        }
      },
      created(){
          this.imageHost=imageHost();
      },
      methods:{
        showDialog(){
            this.dialogVisible = true
        },
        setBannerSection(data){
            this.bannerSectionList=data;
        },
        handleClose(){
            this.dialogVisible = false
        },

        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleRemoveProduct(file,fileList){
            console.log(file, fileList);
            this.form.productUrl='';
        },
        handleSuccessProduct(response, file, fileList){
            // 将图片地址放入表单
            this.form.productUrl=response.data;
        },
        handleRemoveBackground(file,fileList){
            console.log(file, fileList);
            this.form.bgUrl='';
        },

        handleSuccessBackground(response, file, fileList){
            // 将图片地址放入表单
            this.form.bgUrl=response.data;
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                // alert('submit!');
                 this.addForm();
              } else {
                // console.log('error submit!!');
                return false;
              }
            });
        },
        addForm(){
            // 根据模块名查询轮播图id列表
            getBannerIdList(this.form.sectionName).then(response => {
                // 把整个数组对象序列化为 JSON 格式的字符串。
                this.form.bannerIds=JSON.stringify(response.data);
                addSection(this.form).then(response => {
                    this.dialogVisible=false;
                    // 给父组件发送事件
                    this.$emit('custom-event');
                });

            });

        }


      }
   }
</script>

<style scoped>
    .line_video{
        display: flex;
        flex-direction: row;

    }
    .line_video_lable{
        width: 70px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
    .upload-demo{
        margin-left: 15px;

    }
    .line_video_margin{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }
</style>
